好的 ~ 今天了解 v-bind
v-bind 主要用於html屬性的綁定，例如class、style、src、href...等等的屬性，
就可使用v-bind指令與其綁定喔喔~

那就來做一個小卡吧!(練習範例)

試想一下就把class、src、style給綁上去...

html

<div class="container" id="app">
  <div class="card" v-bind:class="{ 'cardyellow': cards.bgc }">
    <div class="top">
      <span>{{cards.name}}</span>
    </div>
    <div class="middle">
      <img v-bind:src="cards.img" alt=""/>
    </div>
    <div class="bottom">
      <div class="text_left" v-bind:style="{ fontSize:  cards.font + 'px'}">{{cards.text}}</div>
      <div class="text_right">
        <p>攻: {{cards.atk}}</p>
        <p>防: {{cards.def}}</p>
      </div>
    </div>
  </div>
</div>

v-bind裡的:class { className : 判斷式 }，也可以用陣列[ ]的方法加入好幾個class

script

var vm = new Vue({
  el:'#app',
  data:{
   cards:
     {
       id: 1,
       name:'海綿寶寶',
       atk:'300',
       def:'200',
       text:'住在深海的大鳳梨裡',
       img:'http://ku.90sjimg.com/element_origin_min_pic/17/10/30/b53a6e6c0f72d4c5ba5cb6f5a1df8630.jpg',       
       font:'14',
       bgc: true,
     }
   
  }
}) 

對了 ! v-bind 有縮寫的~

<img v-bind:src="cards.img" alt=""/>

可以 '縮寫'為 ↓
<img :src="cards.img" alt=""/>

參考文件

明天就來練習v-on囉!